{{define "content"}}
<style>
.challenge-hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
    margin-bottom: 2rem;
}

.challenge-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="white" opacity="0.1"/></svg>') repeat;
    background-size: 40px 40px;
}

.challenge-hero-content {
    position: relative;
    z-index: 2;
}

.badge-difficulty {
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 20px;
}

.badge-beginner {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
}

.badge-intermediate {
    background: linear-gradient(135deg, #ffc107, #fd7e14) !important;
}

.badge-advanced {
    background: linear-gradient(135deg, #dc3545, #e83e8c) !important;
}

.stat-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.stat-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #6c757d;
}

.challenge-podium-card {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: none;
    border-radius: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 250px;
}

.challenge-podium-card.first {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}

.challenge-podium-card.second {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    box-shadow: 0 8px 25px rgba(192, 192, 192, 0.3);
}

.challenge-podium-card.third {
    background: linear-gradient(135deg, #cd7f32, #daa520);
    box-shadow: 0 8px 25px rgba(205, 127, 50, 0.3);
}

.challenge-podium-rank {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.challenge-podium-rank.first {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.challenge-podium-rank.second {
    background: linear-gradient(135deg, #4ecdc4, #45b7aa);
}

.challenge-podium-rank.third {
    background: linear-gradient(135deg, #feca57, #ff6348);
}

.challenge-rank-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 0.9rem;
}

.challenge-rank-badge.top-1 {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #333;
}

.challenge-rank-badge.top-3 {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #333;
}

.challenge-rank-badge.top-10 {
    background: linear-gradient(135deg, #cd7f32, #daa520);
    color: white;
}

.challenge-rank-badge.other {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
}

.achievement-badge {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
}

.participant-row:hover {
    background-color: rgba(102, 126, 234, 0.05);
}

@media (max-width: 768px) {
    .challenge-hero-section h1 {
        font-size: 1.8rem;
    }
    
    .stat-card {
        margin-bottom: 1rem;
    }
    
    .challenge-podium-card {
        height: 200px;
        margin-bottom: 1rem;
    }
}
</style>

<!-- Hero Section -->
<div class="row mb-4">
    <div class="col">
        <div class="challenge-hero-section text-center py-4">
            <div class="challenge-hero-content">
                <h1 class="display-5 fw-bold mb-3">🏆 Challenge {{.Challenge.ID}} Scoreboard</h1>
                <p class="lead mb-3">{{.Challenge.Title}}</p>
                <div class="d-flex align-items-center justify-content-center mb-3">
                    <span class="badge badge-difficulty badge-{{.Challenge.Difficulty | lower}} me-3 px-3 py-2">
                        {{.Challenge.Difficulty}}
                    </span>
                    <span class="text-light opacity-75">
                        <i class="bi bi-people-fill me-1"></i>
                        <span id="participant-count">{{len .Entries}}</span> participants
                    </span>
                </div>
                
                <div class="d-flex justify-content-center flex-wrap gap-2 mb-3">
                    <a href="/challenge/{{.Challenge.ID}}" class="btn btn-light px-4">
                        <i class="bi bi-code-slash me-2"></i>Try Challenge
                    </a>
                    <a href="/scoreboard" class="btn btn-outline-light px-4">
                        <i class="bi bi-trophy me-2"></i>Main Leaderboard
                    </a>
                    <button id="refresh-scoreboard" class="btn btn-outline-light px-4">
                        <i class="bi bi-arrow-clockwise me-2"></i>Refresh
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Performance Stats -->
<div class="row mb-4" id="stats-section">
    <div class="col-md-3 col-6 mb-3">
        <div class="card stat-card">
            <div class="card-body text-center">
                <div class="stat-icon">
                    <i class="bi bi-people-fill"></i>
                </div>
                <h4 class="mb-0" id="total-participants">{{len .Entries}}</h4>
                <small class="text-muted">Total Participants</small>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6 mb-3">
        <div class="card stat-card">
            <div class="card-body text-center">
                <div class="stat-icon text-success">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
                <h4 class="mb-0" id="completed-count">-</h4>
                <small class="text-muted">Completed</small>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6 mb-3">
        <div class="card stat-card">
            <div class="card-body text-center">
                <div class="stat-icon text-warning">
                    <i class="bi bi-graph-up"></i>
                </div>
                <h4 class="mb-0" id="completion-rate">-</h4>
                <small class="text-muted">Success Rate</small>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6 mb-3">
        <div class="card stat-card">
            <div class="card-body text-center">
                <div class="stat-icon text-info">
                    <i class="bi bi-speedometer2"></i>
                </div>
                <h4 class="mb-0" id="difficulty-level">{{.Challenge.Difficulty}}</h4>
                <small class="text-muted">Difficulty</small>
            </div>
        </div>
    </div>
</div>

<!-- Loading State -->
<div id="loading-state" class="text-center py-5" style="display: none;">
    <div class="spinner-border text-primary mb-3" role="status">
        <span class="visually-hidden">Loading scoreboard...</span>
    </div>
    <p class="text-muted">Refreshing scoreboard data...</p>
</div>

<!-- Scoreboard Content -->
<div id="scoreboard-content">
    {{if .Entries}}
        <!-- Top 3 Podium (if we have participants) -->
        <div class="row mb-5" id="podium-section">
            <div class="col">
                <h3 class="text-center mb-4">🥇 Top Performers</h3>
                <div class="row justify-content-center" id="podium-container">
                    <!-- Top 3 will be populated by JavaScript -->
                </div>
            </div>
        </div>

        <!-- Full Scoreboard -->
        <div class="row">
            <div class="col">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="bi bi-list-ol me-2"></i>All Participants
                        </h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0" id="scoreboard-table">
                                <thead class="table-light">
                                    <tr>
                                        <th class="text-center" style="width: 80px;">Rank</th>
                                        <th style="width: 250px;">Developer</th>
                                        <th class="text-center" style="width: 120px;">Status</th>
                                        <th class="text-center" style="width: 150px;">Submitted</th>
                                        <th class="text-center" style="width: 120px;">Achievement</th>
                                    </tr>
                                </thead>
                                <tbody id="scoreboard-tbody">
                                    {{range $index, $entry := .Entries}}
                                    <tr class="participant-row">
                                        <td class="text-center">
                                            <div class="challenge-rank-badge {{if eq $index 0}}top-1{{else if lt $index 3}}top-3{{else if lt $index 10}}top-10{{else}}other{{end}}">
                                                {{if eq $index 0}}🥇{{else if eq $index 1}}🥈{{else if eq $index 2}}🥉{{else}}{{add $index 1}}{{end}}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="https://github.com/{{$entry.Username}}.png" 
                                                     class="avatar-small me-3" alt="{{$entry.Username}}"
                                                     style="width: 40px; height: 40px; border-radius: 50%; border: 2px solid #e9ecef;">
                                                <div>
                                                    <div class="fw-bold">{{$entry.Username}}</div>
                                                    <a href="https://github.com/{{$entry.Username}}" target="_blank" 
                                                       class="small text-muted text-decoration-none">
                                                        <i class="bi bi-github"></i> View Profile
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-success">🎉 SOLVED</span>
                                        </td>
                                        <td class="text-center">
                                            <div class="small">{{$entry.SubmittedAt.Format "Jan 02, 2006"}}</div>
                                            <div class="small text-muted">{{$entry.SubmittedAt.Format "15:04 MST"}}</div>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-primary achievement-badge">🔥 Champion</span>
                                        </td>
                                    </tr>
                                    {{end}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{else}}
        <!-- Empty State -->
        <div class="row">
            <div class="col">
                <div class="card shadow-sm">
                    <div class="card-body text-center py-5">
                        <div class="empty-state">
                            <i class="bi bi-trophy" style="font-size: 4rem; color: #6c757d; margin-bottom: 1rem;"></i>
                            <h4 class="text-muted mb-3">No Submissions Yet</h4>
                            <p class="text-muted mb-4">Be the first to solve <strong>Challenge {{.Challenge.ID}}</strong> and claim the top spot!</p>
                            <a href="/challenge/{{.Challenge.ID}}" class="btn btn-primary btn-lg">
                                <i class="bi bi-code-slash me-2"></i>Start Challenge
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{end}}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const refreshButton = document.getElementById('refresh-scoreboard');
    const loadingState = document.getElementById('loading-state');
    const scoreboardContent = document.getElementById('scoreboard-content');
    const participantRows = document.querySelectorAll('.participant-row');
    const challengeId = {{.Challenge.ID}};

    // Initialize podium if we have participants
    if (participantRows.length > 0) {
        initializePodium();
        updateStats();
    }

    function initializePodium() {
        const podiumContainer = document.getElementById('podium-container');
        if (!podiumContainer) return;

        // Get top 3 participants from the existing table
        const topParticipants = Array.from(participantRows).slice(0, 3);
        
        if (topParticipants.length === 0) return;

        podiumContainer.innerHTML = '';

        topParticipants.forEach((row, index) => {
            const username = row.querySelector('.fw-bold').textContent;
            const submittedDate = row.querySelector('.small').textContent;
            
            const actualRank = index + 1;
            let podiumClass = '';
            let rankClass = '';

            if (actualRank === 1) {
                podiumClass = 'first';
                rankClass = 'first';
            } else if (actualRank === 2) {
                podiumClass = 'second';
                rankClass = 'second';
            } else if (actualRank === 3) {
                podiumClass = 'third';
                rankClass = 'third';
            }

            const podiumCard = document.createElement('div');
            podiumCard.className = 'col-md-4 mb-3';
            podiumCard.innerHTML = `
                <div class="card challenge-podium-card ${podiumClass} text-center p-3">
                    <div class="challenge-podium-rank ${rankClass}">${actualRank === 1 ? '🥇' : actualRank === 2 ? '🥈' : '🥉'}</div>
                    <img src="https://github.com/${username}.png" 
                         class="rounded-circle mx-auto mb-3" 
                         style="width: 80px; height: 80px; border: 3px solid white;">
                    <h5 class="mb-2">${username}</h5>
                    <p class="mb-2"><strong>Challenge Solved</strong></p>
                    <p class="mb-0 small">Submitted: ${submittedDate}</p>
                    <div class="mt-2">
                        <span class="badge bg-primary achievement-badge">🔥 Champion</span>
                    </div>
                </div>
            `;
            podiumContainer.appendChild(podiumCard);
        });
    }

    function updateStats() {
        const totalParticipants = participantRows.length;
        const completedCount = totalParticipants; // All participants in scoreboard are assumed to have completed
        const completionRate = totalParticipants > 0 ? 100 : 0;

        document.getElementById('total-participants').textContent = totalParticipants;
        document.getElementById('completed-count').textContent = completedCount;
        document.getElementById('completion-rate').textContent = completionRate + '%';
        document.getElementById('participant-count').textContent = totalParticipants;
    }

    function refreshScoreboard() {
        loadingState.style.display = 'block';
        scoreboardContent.style.display = 'none';

        // Simulate refresh (in real implementation, you'd fetch new data)
        setTimeout(() => {
            loadingState.style.display = 'none';
            scoreboardContent.style.display = 'block';
            
            // Show success message
            showToast('Scoreboard refreshed successfully!', 'success');
        }, 1000);
    }

    function showToast(message, type = 'info') {
        // Create toast notification
        const toast = document.createElement('div');
        toast.className = `alert alert-${type === 'success' ? 'success' : 'info'} alert-dismissible fade show position-fixed`;
        toast.style.cssText = 'top: 80px; right: 20px; z-index: 1050; min-width: 300px;';
        toast.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        document.body.appendChild(toast);
        
        // Auto remove after 3 seconds
        setTimeout(() => {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, 3000);
    }

    // Refresh button handler
    refreshButton.addEventListener('click', refreshScoreboard);

    // Add hover effects for participant rows
    participantRows.forEach(row => {
        row.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.02)';
            this.style.transition = 'all 0.2s ease';
        });
        
        row.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
        });
    });
});
</script>
{{end}} 